<template>
  <div class="indiv-report">
    <mt-header title="评估报告(文科A卷)">
      <c-router-back slot="left"></c-router-back>
    </mt-header>
    <div class="rate-area">
      <div class="score-chart">
        <high-charts :options="chartData.chart" style="width:100%;"
                     ref="container5"></high-charts>
      </div>
      <div class="percent">
        <div class="tc text-white mt5 mb10 f12">总成绩</div>
        <div class="tc rate"><ICountUp :endVal="percent"
                                       :decimals="1"/>
          <small class="f16">分</small>
        </div>
      </div>
      <div class="other-info">
        <div class="oi-item">
          <div class="f16 text-white"><ICountUp :endVal="682"/></div>
          <div class="f12 grayc">综合等级</div>
        </div>
        <div class="oi-item">
          <div class="f16 text-white"><ICountUp :endVal="Examineenum"/>%</div>
          <div class="f12 grayc">击败率</div>
        </div>
        <div class="oi-item">
          <div class="f16 text-white"><ICountUp :endVal="ranking"/></div>
          <div class="f12 grayc">总排名</div>
        </div>
      </div>
    </div>

    <!--各科成绩，总分排名-->
    <section class="cate-item">
      <div class="btn-wrap">
        <div class="btn-group p20">
          <span class="btn btn-sm btn-second "
                :class="{'btn-primary': areaActive === 1}"
                @click="changearea(1)">各科成绩</span>
          <span class="btn btn-sm btn-second"
                :class="{'btn-primary': areaActive === 2}"
                @click="changearea(2)">总分排名</span>
        </div>
      </div>
      <transition name="fade" mode="out-in">
        <div class="cate-detail item1" v-if="showrank === false" key="item1">
          <span class="sunject-wrap mb15"
                :class="{ mrpercent: index % 2 === 0 }"
                v-for="(item,index) in SubjectItems">
            <div class="fl mr10 icon" :class="[item.icon]"></div>
            <!--<img class="" src="../assets/imgs/icon/report_chinese.png">-->
            <div class="subject-name">{{item.name}}</div>
            <div class="subject-score">{{item.score}}/<span class="subject-totalscore">150</span></div>
          </span>
          <c-more text="查看各科分析 >"
                  class="mt-15"
                  :to="{name:'subject'}"></c-more>
        </div>
        <div class="cate-detail item2" v-if="showrank === true" key="item2">
          <rank-list></rank-list>
          <c-more text="查看总分排名 >"
                  :to="{name:'ranklist'}"></c-more>
        </div>
      </transition>
    </section>
    <!-- 高校预估 -->
    <section class="bg-white mb10">
      <c-section-title title="高校预估" label="(河南省-文科)"></c-section-title>
      <div class="tc">
        <div class="btn-group">
          <span class="btn btn-sm btn-second"
                v-for="(item, index) in myScore.batchs_chart"
                :class="{'btn-primary': chartActive === index}"
                @click="changebatch(index)">{{item.batchs_name}}</span>
        </div>
      </div>
      <ChartLine
        :series="chartData3.data"
        showLevel
        :level-value="score"
        level-legend="我的分值"
        level-name="2018"
        ref="scoreline"
      ></ChartLine>
      <div class="section-desc">
        <div class="mb5">
          分析总结：<span>本次总成绩已超越去年省 本科一批、本科二批和 高职专科批 录取分数线，超过本科一批 104分 ，预估能上一个不错的一本大学！</span>
        </div>
        <div>
          预测院校：<span>去年高考 680分 能上的大学有 北京大学、清华大学、北京航空航天大学 等热门大学。</span>
        </div>
      </div>
      <c-more :to="{name:'volunteer'}"
              text="更多院校录取详情 >"></c-more>
    </section>
    <!-- 提升空间 -->
    <section class="bg-white mb10 promote">
      <c-section-title title="提升空间"></c-section-title>
      <high-charts class="auto" :options="chartData.chart2"
                   ref="container2"></high-charts>
      <div class="section-desc">
        <div class="mb5">
          分析总结：<span>整体预估你有可提升分数，本次测试中各科意外丢分 30分 ，客观题有 35分 都是基本简单的考点比得分。经过强化训练均可一一攻克，总分提升空间为 50-60分 ，达到 720分 将超越 1000人。</span>
        </div>
      </div>
    </section>
    <!-- 提升方案 -->
    <section class="bg-white mb10 promote">
      <c-section-title title="提升方案"></c-section-title>
      <div class="section-desc">
        <div class="mb5">
          针对以上的诊断报告，为你量身定制以下几条提升策略，高考前数学快速提分不是问题。
        </div>
        <div class="mb5">
          1.容易急躁，眼高手低，是大忌。当下应该重视得分率较低的弱科和重难点，多主动请教老师，相信自己，在30天内继续挖掘内在潜力，争取更上一层楼。
        </div>
        <div class="mb5">
          2.不重视小题，基础题失分可惜。妥善的俺怕复习时间，利用碎片时间，通过未来脑APP专项练习强化小题训练，注意归纳总结，稳固提升得分率。
        </div>
        <div class="mb5">
          3.自身知识网络没有关联成形，同一考点，换一种题型或问法就不会做。定期梳理自身知识体系，构建知识网络，牢固掌握知识点、线到面的过程，增强学科知识的系统性。融会贯通，百变可挡。
        </div>
      </div>
    </section>
    <div class="update-tips"><span>基于未来脑智能教学云平台数据生成</span></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import HighCharts from '../components/highcharts'
  import ICountUp from 'vue-countup-v2'
  import ChartLine from '../components/common/chart_line'
  import {mapState} from 'vuex'

  export default {
    data: function () {
      return {
        chartData: {
          data: [{
            name: '近5次综合排名',
            color: '#0ad89a',
            data: [
              ['2011', '540'],
              ['2012', '505'],
              ['2013', '547'],
              ['2014', '563'],
              ['2015', '582']
            ]
          }],
          chart2: {}
        },
        chartData3: {
          data: [
            {
              name: '本科第一批控制线',
              color: '#ff5000',
              data: [
                ['2011', '586'],
                ['2012', '576'],
                ['2013', '526'],
                ['2014', '566']
              ]
            }
          ]
        },
        batchsname: ['本一批控制线', '本二批控制线'],
        color: ['#ff5000', '#8d2e97', '#319962', '#000000'],
        SubjectItems: [
          {icon: 'icon-yuwen', name: '语文', score: 126},
          {icon: 'icon-shuxue', name: '数学', score: 126},
          {icon: 'icon-yingyu', name: '英语', score: 126},
          {icon: 'icon-zhengzhi', name: '政治', score: 126},
          {icon: 'icon-lishi', name: '历史', score: 126},
          {icon: 'icon-dili', name: '地理', score: 126}
        ],
        showrank: false,
        percent: 87.5,
        Examineenum: 123,
        ranking: 23,
        areaActive: 1,
        chartActive: 0,
        myScore: {
          batchs_chart: [
            {
              batchs_chart: [
                {
                  date: '2011',
                  score: '526'
                },
                {
                  date: '2012',
                  score: '566'
                }
              ],
              batchs_name: '本一批'
            },
            {
              batchs_chart: [
                {
                  date: '2011',
                  score: '526'
                },
                {
                  date: '2012',
                  score: '466'
                }
              ],
              batchs_name: '本二批'
            }
          ]
        }
      }
    },
    components: {
      HighCharts,
      ICountUp,
      ChartLine
    },
    computed: {
      ...mapState('user', [
        'isArt',
        'uid',
        'score',
        'major_score'
      ])
    },
    mounted () {
      this.initChart()
    },
    methods: {
      changearea (i) {
        this.areaActive = i
        if (i === 2) {
          this.showrank = true
        } else {
          this.showrank = false
        }
      },
      changebatch (i) {
        this.chartActive = i
        let obj = {}
        let _arr = []
        this.myScore.batchs_chart[i].batchs_chart.forEach((item, index) => {
          _arr.push([item.date, item.score])
        })
        obj.data = _arr
        this.chartData3.data[0] = obj
        this.$refs.scoreline.chartUpdate()
      },
      initChart () {
        this.$set(this.chartData, 'chart', {
          chart: {
            height: 200,
            type: 'solidgauge',
            backgroundColor: '#00adef'
          },
          credits: {
            enabled: false
          },
          title: {
            text: ''
          },
          pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{ // Track for Move
              outerRadius: '102%',
              innerRadius: '98%',
              backgroundColor: '#80d6f7',
              borderWidth: 0
            }]
          },
          yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
          },
          plotOptions: {
            solidgauge: {
              borderWidth: '3px',
              dataLabels: {
                enabled: false
              }
            }
          },
          series: [{
            borderColor: '#fff',
            data: [{
              color: '#fff',
              radius: '100%',
              innerRadius: '100%',
              y: 87.5
            }]
          }]
        })
        this.$set(this.chartData, 'chart2', {
          chart: {
            type: 'pie'
          },
          credits: {
            enabled: false
          },
          legend: {
            enabled: false,
            borderWidth: 0
          },
          title: {
            text: '',
            floating: true
          },
          plotOptions: {
            pie: {
              size: 100,
              animation: true,
              enableMouseTracking: true,
              innerSize: 50,
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.y}',
                style: {
                  color: 'black'
                }
              },
              borderWidth: 2
            }
          },
          tooltip: {
            enabled: true
          },
          exporting: {
            enabled: false
          },
          series: [{
            name: '比例',
            data: [
              {name: '', y: 20, color: '#f3f5f7'},
              {name: '必得分', y: 20, color: '#ffc607'},
              {name: '我的得分', y: 60, color: '#00adef'}
            ]
          }]
        })
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import '../assets/less/_mixins-wln.less';

  .indiv-report{
    .rate-area {
      background-color: @primary;
      color: #fff;
      position: relative;
      .rate {
        font-size: 36px;
      }
      .other-info {
        padding-bottom: 12px;
        display: flex;
        text-align: center;
        align-items: center;
        .oi-item {
          position: relative;
          line-height: 1.5;
          flex: 1;
          .grayc {
            color: rgba(255, 255, 255, .5);
          }
          &:after {
            position: absolute;
            right: 0;
            top: 23%;
            content: '';
            display: block;
            height: 60%;
            width: 1px;
            background-color: rgba(255, 255, 255, .3);
          }
          &:last-child {
            &:after {
              display: none;
            }
          }
        }
      }
      .highcharts-container{
        height:auto !important;
      }
    }
    .cate-item {
      background-color: #fff;
      margin-bottom: 10px;
      font-size: 14px;
      color: #4d555d;
      padding:0 15px;
      position: relative;
      height:371px;
      .cate-detail{
        /*width: 100%;*/
        /*position: absolute;*/
      }
      .icon {
        display: inline-block;
        width: 36px;
        height: 36px;
        vertical-align: -8px;
        margin-right: 10px;
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        &-yuwen {
          background-image: url(../assets/imgs/icon/report_chinese.png);
        }
        &-shuxue {
          background-image: url(../assets/imgs/icon/report_math.png);
        }
        &-yingyu {
          background-image: url(../assets/imgs/icon/report_english.png);
        }
        &-wuli {
          background-image: url(../assets/imgs/icon/report_physics.png);
        }
        &-huaxue {
          background-image: url(../assets/imgs/icon/report_chemistry.png);
        }
        &-shengwu {
          background-image: url(../assets/imgs/icon/report_biology.png);
        }
        &-zhengzhi {
          background-image: url(../assets/imgs/icon/report_politics.png);
        }
        &-lishi {
          background-image: url(../assets/imgs/icon/report_history.png);
        }
        &-dili {
          background-image: url(../assets/imgs/icon/report_geography.png);
        }
      }
      .btn-wrap{
        width: 100%;
        text-align: center;
      }
      .sunject-wrap{
        display: inline-block;
        width: 48%;
        padding:18px;
        border:1px solid #d9dce1;
        border-radius: 6px;
        .subject-name{
          font-size: 14px;
          padding-bottom: 5px;
        }
        .subject-score{
          font-size: 12px;
        }
        .subject-totalscore{
          font-size: 10px;
        }
      }
      .mrpercent{
        margin-right: 4%;
      }
    }
    .promote{
      .highcharts-container{
        height:200px !important;
      }
    }

    .percent{
      position: absolute;
      top: 60px;
      left: 50%;
      margin-left: -45px;
    }
    .section-desc {
      letter-spacing: 1px;
      font-size: 13px;
      padding: 10px;
      color: @muted;
      line-height: 1.4;
    }
    .btn-second.btn-primary {
      background-color: @primary;
      border-color: @primary;
      color: #fff;
    }
    .btn {
      border-left: none;
    }
    .btn-group > .btn:first-child {
      border-left: 1px solid @primary;
      border-right: 1px solid @primary;
    }

    /*脚注*/
    .update-tips {
      margin: 20px auto;
      height: 23px;
      width: 200px;
      line-height: 23px;
      font-size: 12px;
      color: #999;
      text-align: center;
    }
  }

</style>
